import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtForm, AtButton } from 'taro-ui'

import './index.scss'

export default class Phone extends Component {
  constructor (props) {
    super(props)
    this.state = {
      value: ''
    }
  }

  config = {
    navigationBarTitleText: '手机号登录'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handleChange (value) {
    this.setState({
      value: value
    })
  }

  render () {
    return (
      <View className='phone'>
        <Text>未注册手机号登录后将自动创建账号</Text>
        <AtForm>
          <AtInput
            name='value'
            title='+86'
            type='phone'
            clear
            focus
            placeholder='手机号码'
            value={this.state.value}
            onChange={this.handleChange.bind(this)}
          />
          <AtButton type='primary' circle disabled={this.state.value.length === 0}>下一步</AtButton>
        </AtForm>
      </View>
    )
  }
}
